<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label='$t("状态")'>
          <el-select v-model="formInline.status" :placeholder='$t("请选择规则状态")' clearable>
            <el-option :label='$t("新增")' value="1"></el-option>
            <el-option :label='$t("启用")' value="2"></el-option>
            <el-option :label='$t("停用")' value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-input v-model="formInline.ruleName" clearable class="filter-item" style="width: 200px;"
          :placeholder="$t('请填写规则名称')" />

        <el-button class="filter-item" type="info"  icon="el-icon-search"
          :v-permission="['GET /admin/p/reward_distribution_index']" @click="getList">{{ $t('Search') }}</el-button>

        <el-form-item>
          <el-button type="success"  icon="el-icon-edit" :v-permission="['GET /admin/p/reward_distribution_add']"
            @click="handleCreate">{{ $t("新建规则") }}</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit
      highlight-current-row>
      <el-table-column align="center" type="index" :label='$t("序号")' :index="getIndex" width="50"></el-table-column>
      <el-table-column align="center" :label='$t("规则名称")' prop="name" />
      <el-table-column align="center" :label='$t("有效时间")' prop="validDate">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ scope.row.startDate + '--' + scope.row.endDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label='$t("是否生效")' prop="isExpired">
        <template slot-scope="scope">
          <span>{{ handleExpired(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label='$t("当前状态")' prop="status">
        <template slot-scope="{row}">
          <el-tag type="danger" v-if="row.isExpired == 2">{{ filterStatus(row) }}</el-tag>
          <el-tag type="info" v-else-if="row.status == 1">{{ filterStatus(row) }}</el-tag>
          <el-tag type="success" v-else="row.status == 2">{{ filterStatus(row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" :label='$t("创建人")' prop="addAdminName" />
      <el-table-column align="center" :label='$t("创建时间")' prop="addTime" />

      <el-table-column align="center" :label="$t('Operate')" width="250" class-name="small-padding fixed-width">
        <template slot="header" slot-scope="{row}">
          <i class="el-icon-setting"></i>
          {{ $t('Operate') }}
        </template>
        <template slot-scope="scope">
          <el-button plain1 icon="el-icon-edit" v-show="scope.row.status != 2" size="mini"
            @click="handleDetail(scope.row)">编辑
          </el-button>
          <el-button type="info" icon="el-icon-view" v-show="scope.row.status == 2" size="mini"
            @click="handleDetail(scope.row)">查看
          </el-button>
          <el-button type="warning"  icon="el-icon-warning-outline" size="mini" @click="updateStatus(scope.row)"
            :disabled="scope.row.isExpired == 2">{{
                buttonStatus(scope.row.status)
            }}
          </el-button>

          <el-button type="danger" icon="el-icon-delete"  v-if="scope.row.status != 2 || scope.row.isExpired == 2"
            size="mini" @click="handleDelete(scope.row)">
            {{ $t('Delete') }}
          </el-button>

          <!--          <el-button  type="primary" v-if="scope.row.status!=2" size="mini" @click="open(scope.row)">{{$t("启用")}}</el-button>-->
          <!--          <el-button  type="primary" v-if="scope.row.status==2" size="mini" @click="open(scope.row)">{{$t("停用")}}</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <el-tooltip placement="top" :content="$t('Back_to_top')">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>
<script>
import ElSelectDropdown from 'element-ui/packages/select/src/select-dropdown'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { levelMemberList, levelupdateStatus, levelMemberDelete } from '@/api/user'
import { deleteReward, ruleList, updateRewardStatus } from '../../api/distribution'

export default {
  name: 'DistributionReward',
  components: { ElSelectDropdown, BackToTop, Pagination },
  data() {
    const typeMap = ['', this.$t('全场通用')]
    return {
      value1: '',
      formInline: {
        levelMemberName: undefined,
        page: 1,
        limit: 20,
        sort: 'add_time',
        order: 'asc',
        ruleName: undefined,
      },
      typeMap,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined,
        sort: 'add_time',
        order: 'asc'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      ruleList(this.formInline).then(res => {
        this.list = res.data.data.list
        this.total = res.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },

    handleDelete(row) {
      this.$confirm(this.$t('Confirm_Delete?'), this.$t('Hint'), {
        confirmButtonText: this.$t('Confirm'),
        cancelButtonText: this.$t('Cancel'),
        type: 'warning'
      }).then(() => {
        this.doDelete(row)
      })
    },
    doDelete(row) {
      var ruleId = row.id
      deleteReward(ruleId).then(response => {
        this.$notify.success({
          title: this.$t('Success!'),
          message: this.$t('Deleted')
        })
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },

    handleCreate() {//新增
      this.$router.push({ path: '/Distribution/RuleConfig', query: { type: 1, status: 0 } })
    },

    handleDetail(row) {//跳转详情
      this.$router.push({ path: '/Distribution/RuleConfig', query: { id: row.id, type: 2, status: row.status } })

    },
    // 更改状态
    updateStatus(row) {

      this.$confirm(this.$t('是否') + this.$t('改变该奖励规则状态') + '?', this.$t('提示'), {
        confirmButtonText: this.$t('Confirm'),
        cancelButtonText: this.$t('Cancel'),
        type: 'warning'
      }).then(() => {
        this.doUpdateStatus(row)
      })
    },
    doUpdateStatus(row) {
      updateRewardStatus(row.id).then(response => {
        this.$notify.success({
          title: this.$t('Success!'),
          message: this.$t(response.data.errmsg)
        })
        this.getList()
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    open(row) {
      var mag = row.status == 1 ? this.$t('新增') : row.status == 2 ? this.$t('停用') : row.status == 3 ? this.$t('启用') : row.status
      // var mag= row.status==0?'上架':row.status==1?"下架":row.status==2?'上架':row.status
      this.$confirm(this.$t('确定') + mag + this.$t('吗?, 是否继续?'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        levelupdateStatus({ memberId: row.id }).then(res => {
          this.$message({
            type: 'success',
            message: mag + this.$t('成功!')
          })
          this.getList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('取消成功')
        })
      })
    },
    getIndex(index) {
      return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit
    },
    handleExpired(row) {
      if (row.isExpired == 2) {
        return this.$t('已过期')
      } else {
        return this.$t('生效中')
      }
    },
    filterStatus({ status, isExpired }) {
      if (isExpired == 2) {
        return this.$t('停用');
      }
      if (status == 1) {
        return this.$t('新增')
      } else if (status == 2) {
        return this.$t('启用')
      } else if (status == 3) {
        return this.$t('停用')
      }
    },
    buttonStatus(status) {
      if (status == 2) {
        return this.$t('停用')
      } else if (status == 1) {
        return this.$t('启用')
      } else if (status == 3) {
        return this.$t('启用')
      }
    },
    formatDate(strTime) {
      var date = new Date(strTime)
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    }
  }
}
</script>

<style scoped>
/*.daytime{*/
/*  color: #606266;font-size: 14px;font-weight: 700;*/
/*}*/
</style>
